

<template>
  <div class="detail">
    <div class="tablesB" v-if="dialogTitle == '药品退领详情'">
     
      <el-table :data="drugCollarDetailRetreat.drug_item" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['drugRetreat']['detail']">
          <el-table-column
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div
      class="tablesB"
      v-if="dialogTitle == '药品退领新增' || dialogTitle == '药品退领修改'"
    >
      <div class="selects">
        <div v-if="dialogTitle == '药品退领修改'">
          <div>申请单号：</div>
          <div>
            <el-input v-model="drugCollarDetailRetreat.number"  :disabled="true"> </el-input>
          </div>
        </div>
       
            <div>
          <div>
            申领药房:
          </div>
            <div>
         <el-select @change="onchangeStore" v-model="drugCollarDetailRetreat.house_id" placeholder="退领药房" >
            <el-option
              v-for="item in  houseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        </div>
        <div>
             <div>
            源库房:
          </div>
                <div>
          <el-select  v-model="drugCollarDetailRetreat.store_id" placeholder="库房" >
            <el-option
              v-for="item in  KuFangList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      
        </div>
    
         <div>
          <div>申领人员：</div>
          <div>
            <dialogTableUser :that="this" funName="storage/set_drugCollarDetailRetreat" :setVal="setVal"       typeName="apply_user"></dialogTableUser>
          
          </div>
        </div>
        <div>
          <div>接收人员：</div>
          <div>
            <dialogTableUser :that="this" funName="storage/set_drugCollarDetailRetreat" :setVal="setVal"    typeName="accept_user"></dialogTableUser>
          
          </div>
        </div>
        <div>
          <div>备注：</div>
          <div>
            <el-input v-model="drugCollarDetailRetreat.remark" placeholder="请输入备注" > </el-input>
          </div>
        </div>


           

            
      </div>
      <div class="selectTables" v-if="drugCollarDetailRetreat.house_id">
              <div style="margin-right:10px;width:100px">选择药品</div>
              <el-popover placement="bottom-end" width="500px" trigger="focus">
                <el-input
                  placeholder="选择药品"
                  slot="reference"
                  v-model="selectParams.keyword"
                  @input="getDrugItem()"
                >
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>

                <el-table
                  v-loading="threeSelectLoading"
                  height="300"
                   @current-change="xuanzeDataThree"
                  highlight-current-row
                  :data="selectData.selectData2"
                  style="width: 100%"
                >
             
                      <el-table-column type="index" width="70" label="序号">
        </el-table-column>
                  <el-table-column label="药品名称" prop="name" width="150">
                  </el-table-column>
                    <el-table-column label="药品批号" prop="fill_no" width="150">
                  </el-table-column>
                  <el-table-column
                    label="规格"
                    prop="specification"
                    width="300"
                  >
                  </el-table-column>
                </el-table>
                <!-- <el-pagination
                  :current-page="selectParams.page"
                  :page-size="selectParams.limit"
                  @current-change="handlePagination"
                  :total="selectParams.pageCount"
                  layout="prev, pager, next"
                >
                </el-pagination> -->
              </el-popover>
            </div>
      <div v-if="drugCollarDetailRetreat.house_id">
            <el-table :data="tableData2" style="width: 100%">
              <template v-for="(item, index) in $baseBai['drugRetreat']['updateList']">
               
               
               

               
                  
                 <el-table-column
                  :width="item.width"
                  v-if="item.prop == 'count'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                     <el-input-number v-model="scope.row.count" controls-position="right"  :min="0" :max="scope.row.num" ></el-input-number>
                  </template>
                </el-table-column>


             
              
              

                <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'remark'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <span>
                        <el-input
                          v-model="scope.row.remark"
                          placeholder="备注"
                        ></el-input>
                      </span>
                    </span>
                  </template>
                </el-table-column>
               

                <el-table-column
                  :width="item.width"
                  v-else
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                </el-table-column>
              </template>

              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData2)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="buts" >
                 <div> <el-button type="info" @click="thatF.Detail_Show=false">取消</el-button></div>
                 <div> <el-button class="butB_Add" @click="save" >保存</el-button></div>
            </div>
    </div>
      
  </div>
</template>
<script>
let t;
import { mapState, mapActions } from "vuex";
import dialogTableUser from '../../components/dialogTableUser'

export default {
  data() {
    return {
         setVal: {
        apply_user: "apply_user_info",
        accept_user: "accept_user_info",
      },
       visiblePatient: false,
       patientLoading:false,
      params:{
      
        people_id:'',
        accept_user:'',
        number:'',
        remark:'',
        arrival_date:'', 
        page:1,
        limit:10,
        peopleCount:0,
      },

   


       selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
      },
      selectData:{
        selectData2: [],
      },
          tableData2: [],
       threeSelectLoading: false,
       peopleData:[],
    };
  },
  components: {
   dialogTableUser
  },
    mounted() {
          if (this.dialogTitle == "药品退领修改") {
            this.tableData2=this.drugCollarDetailRetreat.drug_item.map(v=>{
            return {
              name:v.drug_info.name,
              base_unit: v.drug_info.base_unit,
              buy_price: v.buy_price,
              origin_factory:v.drug_info.origin_factory,
              specification:v.drug_info.specification,
              fill_no:v.fill_no,
              drug_id:v.drug_id,
              store_num_id:v.store_num_id,
              house_num_id:v.house_num_id,
              useful_time:v.useful_time,
              num: v.num,
              count:v.num,
              remark:v.remark,
                 }
          })
       }
      this.onchangeStore()
  },
  props: ["dialogTitle",'thatF'],
  methods: {
    
    onchangeStore(){
         if(this.drugCollarDetailRetreat.house_id){
            this.getDrugItem()
         }
    },
     
     save(){
     
       if(this.tableData2.length<=0){
         return  this.$message.error('请选择药品信息');
       }
     
    
        let d={
      
          remark:this.drugCollarDetailRetreat.remark,
          store_id:this.drugCollarDetailRetreat.store_id,
          house_id:this.drugCollarDetailRetreat.house_id,
          apply_user:this.drugCollarDetailRetreat.apply_user,
          accept_user:this.drugCollarDetailRetreat.accept_user,
          drug_items:this.tableData2.map(v=>{
            return {
              num:v.count,
              remark:v.remark,
              fill_no:v.fill_no,
              useful_time:v.useful_time,
               drug_id:v.drug_id,
              buy_price:v.buy_price,
              house_num_id:v.house_num_id,
              store_num_id:v.store_num_id,
             
            }
          })
        }
        if(this.dialogTitle == '药品退领修改'){
          d.id=this.drugCollarDetailRetreat.id;
        }
   
          this['_API'].getdrug_houseExitClaimSave(d).then(res=>{
            if(res.code==200){
              this.thatF.Detail_Show=false
                this.$message({
                message: res.message,
                type: 'success'
              });
              setTimeout(()=>{
                 this.thatF.params.page=1;
                this.thatF.getList()
              },500)
             
            }
          })
      //  getdrug_purchaseSave
     },
      deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handlePagination(e) {
      this.threeSelectLoading = true;
      this.selectParams.page = e;



         this.getDrugItem();
  
     
    },
      xuanzeDataThree(item) {
       if( this.tableData2.findIndex(res=>res.store_num_id==item.store_num_id)===-1){
        this.tableData2 = this.tableData2.concat(item);
     }
      
    
    },
      getDrugItem() {
        if(!this.drugCollarDetailRetreat.house_id){
          return  this.$message.error('请些选择药房');
        }
      let d = {
        keyword: this.selectParams.keyword,
        house_id:this.drugCollarDetailRetreat.house_id,
        page:this.selectParams.page,
        limit:this.selectParams.limit,
      };

      this["_API"].getdrug_houseSelectIndex(d).then((res) => {
        if (res.code == 200) {
          this.selectData.selectData2 = res.data.map(v=>{
            return {
              ...v,
              buy_price:v.price,
              count:0,
              house_num_id:v.id
            }
          });

      
          this.selectParams.pageCount = res.data.count;
          this.threeSelectLoading = false;
        }
      });
    },
  },
  computed: {
    ...mapState({
      drugCollarDetailRetreat:state => state.storage.drugCollarDetailRetreat,
         KuFangList: state => state.dictBai.KuFangList,
         houseList:state => state.dictBai.houseList,
    }),
  },

};
</script>
<style lang='scss' scoped>
.addUdetailpdate {
  padding: 0 5%;
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 20px;
    width: 25%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}
.selectTables{
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
 
}
.buts{
    display: flex;
    margin-top: 50px;
    justify-content: center;
    >div{
        margin-right: 20px;
    }
}
</style>